<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>组件</title>
  <script src="https://cdn.bootcss.com/vue/2.4.4/vue.js"></script>
</head>
<body>
  <h3>组件就是页面上的一小块区域内容,完成一个小的页面功能</h3>
  <h3>Vue.js的组件不仅可以单独声明注册使用,还可以在Vue实例中进行局部注册使用</h3>
  <hr>
  <div id="myApp">
    <!-- 自定义一个标记 -->
    <today-date></today-date>
    <today-weather v-bind:action="action[1]"></today-weather> 
    <ol>
      <game-item v-for="item in games" v-bind:game="item"></game-item>
    </ol>
    <hr>
    <br>
    <simple-counter></simple-counter>
    <simple-counter></simple-counter>
    <simple-counter></simple-counter>
  </div>
  
  <script>
    //组件使用的几种方法

    //组件定义：today-date (全局)
    Vue.component('today-date',{
        template:'<b>2017年10月1日</b>'
    })
    var todayWeather = {
       props: ['action'],
       template: '<b>今天下雨,出不去了,干什么呢,{{action}}吧!</b>',
    }

    var myApp = new Vue({
      el: '#myApp',
      data: {
        games: [
          { title: 'LOL', time: 2 },
          { title: '王者荣耀', time: 2.5 },
          { title: '吃鸡大逃亡', time: 3 },
        ],
        action:['听音乐','玩游戏','看电影'],
        counter: 0
      },
      //组件局部注册使用
      components:{
        'game-item':{
          props: ['game'],
          template: '<li>{{game.title}} , 玩了{{game.time}}小时</li>'
        },
        'today-weather': todayWeather,
        'simple-counter':{
          template: '<button v-on:click="counter += 1">{{ counter }}</button>',
          //// 组件实例中 data 必须是一个函数
          data: function () {
              return {
                counter: 0
              }
            }
        }
      }
    })
  </script>
</body>
</html>